<template>
  <div class="outside" ref="lyric">
    <ul class="lyric" ref="_lyric">
      <li :class="{choose:(index===lyricIndex)}" v-for="(item, key ,index) in currentMusicLyric" :key="key">{{item}}</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name:'lyric',
  props:['Lyric'],
  data(){
    return {
      currentMusicLyric:null,
      lyricIndex:0,
      lyricLength:null,
      value:0,
      timers:0,
    }
  },
  computed:{
    ...mapState({
      duration(state){
        return state.currentMUsicDuration
      },
      isplay(state){
        return state.isPlay
      },
      musicProgress:state => state.currentMusicProgress
    }),
    addTime(){
      return this.duration/this.lyricLength
    },
  },
  methods:{
    parseLyric(){
      if(this.Lyric){
        let lyric = this.Lyric
        let lyricArr = (lyric || '').split('[').slice(1);
        let lrcObj = {};
        let num
        lyricArr.forEach(item => {
          let arr = (item || '').split(']')
          let m = parseInt((arr[0] || '').split(':')[0])
          let s = parseInt((arr[0] || '').split(':')[1])
          arr[0] = m*60 + s + 1
          num = arr[0]
          if (arr[1] != '\n') {
            lrcObj[arr[0]] = arr[1]
          }
        })
        this.lyricLength = num
        this.currentMusicLyric = lrcObj
      }else{
        this.lyricLength = 0
        this.currentMusicLyric = ['该歌曲暂无歌词']
      }
    },
    play(){
      this.clearinterval()
      this.timers = setInterval(() => {
        this.value++
      },1000);
    },
    pause(){
      this.clearinterval()
    },
    clearinterval(){
      for(var i=1;i<=this.timers;i++){
        clearInterval(i);
      }
    },
    valueChange(){
      let i = 0
      for (let key in this.currentMusicLyric) {
        if (key == this.value) {
          this.lyricIndex = i;
          let lyricheight = (this.$refs.lyric.scrollHeight - 500)/Object.keys(this.currentMusicLyric).length
          this.$refs.lyric.scrollTop = lyricheight * i;
          this.$refs._lyric.style.transform = `translateY(${-lyricheight * i}px)`;
          this.$refs._lyric.style.top = lyricheight * i + 'px';
        }
        i++;
      }
    }
  },
  mounted(){
    this.parseLyric()
  },
  watch:{
    Lyric:{
      handler(){
        this.value = 0
        this.lyricIndex = 0
        this.parseLyric()
        if(this.isplay){
          this.play()
        }
      },
      immediate:true
    },
    value() {
      this.valueChange()
    },
    isplay:{
      handler(){
        if(this.isplay){
          this.play()
        }else this.pause()
      },
      immediate:false
    },
    musicProgress:{
      handler(){
        this.value = parseInt(this.musicProgress)
        let i = 0
        for (let key in this.currentMusicLyric) {
          if (key > this.value) {
            this.lyricIndex = i-1;
            let lyricheight = (this.$refs.lyric.scrollHeight - 500)/Object.keys(this.currentMusicLyric).length
            this.$refs.lyric.scrollTop = lyricheight * i;
            this.$refs._lyric.style.transform = `translateY(${-lyricheight * i}px)`;
            this.$refs._lyric.style.top = lyricheight * i + 'px';
            return
          }
          i++;
        }
        
      }
    }
  }
}
</script>

<style scoped>
  .outside{
    height: 100%;
    overflow-y: scroll;
    display: flex;
    justify-content: center;
    position: relative;
  }
  .outside::-webkit-scrollbar {
    width: 6px;
  }
  .outside::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgb(205,205,205);
  }
  .outside::-webkit-scrollbar-thumb:hover{
    background-color: rgb(195,195,195);
  }
  .lyric{
    margin-top: 155px;
    color:rgb(101,100,100);
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    position: relative;
    
    transition: transform .3s linear;
  }
  .lyric li{
    margin-bottom: 18.5px;
    text-align: center;
  }
  .lyric li:last-child{
    padding-bottom: 300px;
  }
  .choose{
    font-weight: 800;
    font-size: 16px;
    color:#000;
  }
</style>